import React from 'react';
import { is_empty, obj_str } from 'sui';
import { split_psn } from 'client/pick/cmd';

const StepView = ({ umd, opt }) => {
    const getVal = (d) => {
        let dia = obj_str(d, "outdia");
        if (!dia) {
            dia = obj_str(d, "india");
        }

        let dt = obj_str(d, "outdt");
        if (!dt) {
            dt = obj_str(d, "indt");
        }

        let width = obj_str(d, "outwidth");
        if (!width) {
            width = obj_str(d, "inwidth");
        }

        return [dia, dt, width];
    };

    const isRange = (k1, k2, v) => {
        let min = obj_str(opt, k1);
        let max = obj_str(opt, k2);

        if (!min || !max) {
            return false;
        }

        min = Math.trunc(parseFloat(min) * 1000);
        max = Math.trunc(parseFloat(max) * 1000);

        const tmp = Math.trunc(parseFloat(v) * 1000);

        return tmp >= min && tmp <= max;
    };

    const getMsn = () => {
        const info = umd.info;
        if (is_empty(info)) {
            return null;
        }

        const ret = [];

        info.forEach(d => {
            const sn = obj_str(d, "sn");
            const pos = obj_str(d, "pos");

            const [dia, dt, width] = getVal(d);

            if (isRange("dmin", "dmax", dia)) {
                return;
            }

            if (isRange("tmin", "tmax", dt)) {
                return;
            }

            if (isRange("wmin", "wmax", width)) {
                return;
            }

            ret.push(
                <div key={sn} className="flex flex-col bg-blue-500 m-2">
                    <div className="text-base w-40 text-center">{split_psn(sn)}</div>
                    <div className="text-base w-40 text-center">{pos}</div>
                    <div className="text-base w-40 text-center text-white">直径<span className="ml-2">{dia}</span></div>
                    <div className="text-base w-40 text-center text-white">沟径<span className="ml-2">{dt}</span></div>
                    <div className="text-base w-40 text-center text-white">宽度<span className="ml-2">{width}</span></div>
                </div>
            );
        });

        return ret;
    };

    return (
        <div className="flex h-full overflow-y-auto">
            <div className="flex flex-wrap content-start">
                {getMsn()}
            </div>
        </div>
    );
};

export {StepView};
